<template>
  <div class='container'>

    <div>
      <b>computed</b>
      求和 {{ total }}
      methods求和  {{handleAdd(x,y)}}
      <el-button type='primary' @click='addX'>x+1</el-button>
    </div>

    <div>
      <b>computed</b>
      反转 {{ reverseStr }}
    </div>

    <div>
      <b>指令</b>
      <span v-color='color'>this is a book</span>
    </div>

    <div>
      <b>过滤器</b>
      初始日期 {{ date }}
      <br />
      <b>过滤后的日期</b>
      {{ date |  handleDate }}
    </div>

    <div>
      <el-button type='warning' @click='handleObj'>修改obj</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'computed1000',
  data() {
    return {
      x: 10,
      y: 15,
      msg: 'this is a book',
      date: new Date(),
      color: 'blue',
      obj: {
        name: 'jack',
        age: 20,
        info: {
          hobbies: ['basketball', 'reading', 'music']
        }
      }
    }
  },
  mounted() {
    console.log('mounted:', this.x)
  },
  created() {
    this.handleObj()
  },
  computed: {
    total() {
      return this.x + this.y
    },
    reverseStr() {
      return this.msg.split('').reverse().join('')
    }
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log('watch:', newVal, oldVal)
      },
      deep: true,
      immediate: true
    }
  },
  directives: {
    color: {
      inserted(el, binding) {
        console.log(el, binding)
        el.style.color = binding.value
      }
    }
  },
  filters: {
    handleDate(d) {
      let year = d.getFullYear().toString().slice(0, 2) // 20
      return Number(year) - 1 + '世纪'
    }
  },
  methods: {
    addX() {
      this.x++
    },
    handleObj() {
      this.obj.info.hobbies[2] = 'running'
    },
    handleAdd(a,b){
      return a + b
    }
  }

}
</script>

<style scoped>
.container div {
  width: 50%;
  height: 70px;

}
</style>